<template>
  <div class="revenueStatistics">
    <!-- revenueStatistics style="width: 1639px;height:361px;padding-left:10px;margin-bottom:10px;" -->

    <div id="revenueStatisticsMain" class="revenueStatistics-main">
    </div>
    <span class="wanyuan">（万元）</span>
  </div>
</template>

<script>
const echarts = require('echarts')
import { AccountsReceivable } from '@/api/revenueHome/index'
export default {
  name: 'ecahrtsM',
  data() {
    return {
      echarts: '',
      waterData: [],
      receivableList: [],
      receiptsList: [],
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  methods: {
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let revenueStatisticsMain = document.getElementById(
        'revenueStatisticsMain'
      )
      revenueStatisticsMain.style.height = height - 10 + 'px'
      revenueStatisticsMain.style.width = width - 10 + 'px'
      this.echarts = this.$echarts.init(revenueStatisticsMain)
      this.echarts.resize()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(
        document.getElementById('revenueStatisticsMain')
      )
      var option = {
        // 提示框
        tooltip: {
          show: true,
          color: '#828282',
          trigger: 'item',
          position: 'right',
        },
        grid: {
          top: '20%',
          left: '6%',
          right: '3%',
          // bottom: '35%',
          containLabel: true, //是否包含文本
          containLabel: false, // gird 区域是否包含坐标轴的刻度标签
          //  borderColor: 'blue'
        },
        color: ['#0B9AC3', '#E69620'],
        toolbox: {
          feature: {},
        },
        legend: {
          type: 'plain', //图例类型
          data: ['应收', '实收'],
          top: '20px',
          left: '45%',
          orient: 'horizontal', //图例列表的布局朝向。
          itemGap: 20, //图例每项之间的间隔
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            // name: '（万元）',
            nameLocation: 'end',
            splitLine: {
              show: false, //y轴分隔线
              lineStyle: {
                color: '#999',
              },
            },
            scale: true,
            axisLabel: {
              // formatter: function (value, index) {
              //     if (value >= 10000 && value < 10000000) {
              //         value = value / 10000 + "万";
              //     } else if (value >= 10000000) {
              //         value = value / 10000000 + "千万";
              //     }
              //     return value;
              // }
            },
            // min: 0,
            // max: 120,
            // min: 0,
            // max: 1200000,
            spliNumber: 6,
            // 刻度是否显示
            axisTick: {
              show: false,
            },
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取柱状图水量
    async getCopyExampleData(call) {
      const res = await AccountsReceivable()
      // console.log(res,'请求数据');
      let receivableList = []
      let receiptsList = []
      const resObj = res.data
      for (const key in resObj) {
        if (Object.hasOwnProperty.call(resObj, key)) {
          const element = resObj[key]
          receivableList.push(element[0])
          receiptsList.push(element[1])
        }
      }
      console.log(receivableList, receiptsList, '查看操作后的数据')
      // 应收数据
      this.receivableList = receivableList
      // 已收数据
      this.receiptsList = receiptsList
      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {},
        toolbox: {
          feature: {},
        },
        legend: {
          data: ['应收', '实收'],
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',

            splitLine: {
              show: false,
            },
            scale: true,
            axisLabel: {
              // margin: 2,
              formatter: function (value, index) {
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000
                } else if (value >= 10000000) {
                  value = value / 10000000 + '千万'
                  // value = value / 10000000;
                }
                return value
              },
            },
          },
        ],

        series: [
          {
            type: 'line',
            name: '应收',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#0B9AC3',
              },
            },
            data: receivableList,
            // data:parseInt(receivableList) / 10000
          },
          {
            type: 'line',
            name: '实收',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#E69620',
              },
            },
            data: receiptsList,
          },
        ],
      })
      call && call()
    },
  },
  mounted() {
    this.createEcharts()
    this.getCopyExampleData(() => {
      let width =
        document.querySelector('.revenueStatistics').parentNode.parentNode
          .parentNode.style.width
      let height =
        document.querySelector('.revenueStatistics').parentNode.parentNode
          .parentNode.clientHeight
      console.info('width--', width.split('p')[0])
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
}
</script>

<style>
.revenueStatistics-main {
  width: 320px;
  height: 220px;
}
.wanyuan {
  font-size: 14px;
  position: absolute;
  top: 54px;
  right: 15px;
}
</style>
